<template>
  <view class="container-wrap" :style="{ height: currentHeight }">
    <view class="title">
      <view @click="isFullScreenFn">数量波动</view>
      <view class="flex">
        <view style="width: 150px">
          <uni-select v-model="selectValue" dataKey="label" dataValue="value" :clear="false" :localdata="selectList"
            @change="conditionChange"></uni-select>
        </view>
        <view style="width: 60px; margin-left: 10px">
          <uni-select v-model="dateType" dataKey="name" dataValue="value" :clear="false" :localdata="dateTypeList"
            @change="conditionChange"></uni-select>
        </view>
      </view>
    </view>
    <view class="echart-wrap">
      <echarts-uniapp ref="quantityWaveRef" @touchStart="touchStart" @touchEnd="touchEnd"
        canvasId="quantityWaveChart"></echarts-uniapp>
    </view>
    <uni-loading v-show="showLoading"></uni-loading>
  </view>
</template>
<script>
  import { colorList, qTDataList } from './baseData.js';
  import { qualityStatisticsPur } from '@/api/dashboard';
  import { getCurrentDateForParam } from '@/utils/common.js';
  import echartsUniapp from '../common/echarts-uniapp/echarts-uniapp';
  import uniLoading from '../common/uni-loading/uni-loading';
  export default {
    props: {
      currentHeight: {
        type: String,
        default: '100vh'
      }
    },
    components: {
      echartsUniapp,
      uniLoading
    },
    data() {
      return {
        showLoading: false,
        canSlide: 0,
        xAxisList: [],
        percentValue: [],
        touchXStart: 0,
        slideDirection: 0,
        selectValue: qTDataList[0].value,
        selectList: qTDataList,
        dateType: 'daterange',
        dateTypeList: [
          { name: '日', value: 'daterange' },
          { name: '周', value: 'week' },
          { name: '月', value: 'month' },
          { name: '季', value: 'quarter' },
          { name: '年', value: 'year' }
        ],
        option: {
          color: colorList,
          tooltip: {
            trigger: 'axis',
            confine: true,
            responsive: true,
            axisPointer: {
              type: 'shadow',
              axis: 'auto',
              snap: true
            },
            textStyle: {
              testShadowColor: 'transparent',
              textShadowBlur: 10
            },
            padding: 5
          },
          grid: {
            left: 10,
            right: 0,
            top: 20,
            bottom: 0,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            data: []
          },
          yAxis: {
            type: 'value',
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              formatter: '{value}吨'
            }
          },
          series: []
        }
      };
    },
    mounted() {
      this.qualityStatisticsPurFn();
    },
    methods: {
      isFullScreenFn() {
        if (this.currentHeight === '100vh') {
          return;
        }
        this.$tab.navigateTo('/packageA/pages/purchaseTransport/quantityWave');
      },
      touchStart(e) {
        this.touchXStart = e.changedTouches[0].clientX || 0;
      },
      touchEnd(e) {
        const touchXEnd = e.changedTouches[0].clientX;
        if (this.touchXStart - touchXEnd > 0) {
          this.slideDirection = 1;
          this.qualityStatisticsPurFn();
        }
        if (this.touchXStart - touchXEnd < 0) {
          if (this.canSlide !== 0) {
            return;
          }
          this.slideDirection = 0;
          this.qualityStatisticsPurFn();
        }
      },
      conditionChange() {
        this.xAxisList = [];
        this.qualityStatisticsPurFn();
      },
      async qualityStatisticsPurFn() {
        let dateTime = '';
        if (!this.xAxisList.length) {
          dateTime = getCurrentDateForParam(new Date());
        }
        if (this.xAxisList.length) {
          if (!this.slideDirection) {
            dateTime = this.xAxisList[0]?.value?.split('_')?.[0];
          }
          if (this.slideDirection) {
            dateTime =
              this.xAxisList[this.xAxisList.length - 1]?.value?.split('_')?.[1];
          }
        }
        const data = {
          dateType: this.dateType,
          type: this.selectValue,
          reqSource: 1,
          slideDirection: this.slideDirection,
          time: dateTime
        };
        this.showLoading = true;
        const res = await qualityStatisticsPur(data);
        if (res.code === 0) {
          this.canSlide = res?.data?.canSlide;
          const dataInfoList = res?.data?.dataInfoList || [];
          this.xAxisList = res?.data?.dateRespVOList || [];
          this.option.yAxis.max = this.isHasData(dataInfoList) ? 1 : null;
          this.option.yAxis.axisLabel.formatter = `{value}${this.dateType === 'daterange' ? '吨' : '万吨'
            }`;
          this.option.tooltip.responsive = true;
          this.option.tooltip.formatter = this.getTooltip();
          this.option.xAxis.data = this.xAxisList.map((e) => e.label) || [];
          this.option.series = dataInfoList.map((e) => {
            return {
              name: e.coalSourceType,
              type: 'bar',
              data: this.getSeriesDataList(e),
              barWidth: 20,
              stack: 'total'
            };
          });
          this.$refs.quantityWaveRef.initChart(this.option);
        }
        this.showLoading = false;
      },
      getSeriesDataList(e) {
        return (e.dataValue || []).map((m, n) => {
          return {
            percent: e.percentValue[n],
            value: m
          };
        });
      },
      isHasData(list) {
        return list.every((e) => !e.dataValue.length);
      },
      getTooltip() {
        return (param) => {
          let result = `${param[0]?.name}\n\r`;
          const paramList = param.filter((e) => Number(e.value));
          if (paramList.length) {
            paramList.forEach((e, v) => {
              if (v === paramList.length - 1) {
                result += `${e.marker} ${e.seriesName} ${e.value}${this.dateType === 'daterange' ? '吨' : '万吨'
                  } ${e.data.percent}%`;
              } else {
                result += `${e.marker} ${e.seriesName} ${e.value}${this.dateType === 'daterange' ? '吨' : '万吨'
                  } ${e.data.percent}%\n\r`;
              }
            });
          } else {
            result += '暂无数据';
          }
          return result;
        };
      }
    }
  };
</script>
<style lang="scss" scoped>
  .container-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px 10px;
    background-color: #ffffff;
    border-radius: 8px;

    .title {
      display: flex;
      font-size: 14px;
      color: #000000;
      font-weight: 600;
      padding-bottom: 11px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e6e6e6;
    }

    .echart-wrap {
      flex: 1;
    }

    .flex {
      display: flex;
    }

    .flex-direction {
      flex-direction: column;
    }
  }
</style>